import React from 'react';
import Header from './components/Header';
import List from './components/List';
import Footer from './components/Footer';
import './App.css';

class App extends React.Component {
  //state状态提升
  state = {
    todos: [
      { id: '001', name: '吃饭', done: true },
      { id: '002', name: '睡觉', done: true },
      { id: '003', name: '唱歌', done: false },
    ],
  };
  //状态在哪里，修改操作就在那里
  //添加一个todo
  addTodo = (todoObj) => {
    const { todos } = this.state;
    //数组追加
    //数组复制与合并
    const newTodos = [todoObj, ...todos];
    //修改添加以后的状态
    this.setState({ todos: newTodos });
  }

  //选中一个todo并更新
  updateTodo = (id,done) =>{
    //利用新数据进行状态的修改更新
    const todos = this.state.todos;
    const newTodos = todos.map((todoObj)=>{
      // 进行遍历，每个item项的id是不是与传递过来的id相等，如果相等，说明就是修改的目标，
			// 那么当前的这个找到的item对象，我将它的done进行修改
      if(todoObj.id === id) todoObj.done = done;
      return todoObj;
    })
    this.setState({todos:newTodos});
  }


  render() {
    const { todos } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo = {this.addTodo} />
          <List todos={todos} updateTodo ={this.updateTodo}/>
          <Footer />
        </div>
      </div>
    )
  }
}

export default App;
